<template>
	<view class="advic-page">
		<view class="title">意见反馈</view>
		<view class="item">
			<text>联系方式</text>
			<input type="text" placeholder="请输入联系方式" :value="phonenumber" @input="getPN" />
		</view>
		<view class="item">
			<text>反馈内容：</text>
			<textarea auto-height="true" :value="advice_content" placeholder="请输入反馈内容" @input="getadvicecontent" name=""
				id="" cols="30" rows="10"></textarea>
		</view>
		<button type="primary" style="width: 60%;" size=" default" @click="commit">提交</button>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		http
	} from '../../API/request.js';
	const phonenumber = ref('')
	const advice_content = ref('')
	const getPN = (e) => {
		phonenumber.value = e.detail.value
	}
	const getadvicecontent = (e) => {
		advice_content.value = e.detail.value
	}
	const commit = () => {
		const openid = uni.getStorageSync('openid')
		http.post('/addAdvice', {
			openid: openid,
			phonenumber: phonenumber.value,
			advice_content: advice_content.value
		}).then((res) => {
			const {
				data
			} = res
			if (data === 'success') {
				uni.showToast({
					title: '提交成功',
					icon: 'none',
					success: () => {
						phonenumber.value = ''
						advice_content.value = ''
					}
				})
			} else {
				uni.showToast({
					title: '提交失败',
					icon: 'none'
				})
			}
		})
	}
</script>

<style lang="less">
	.advic-page {
		background-color: #fff;
		width: 80%;
		margin: 0 auto;
		padding: 40rpx;
		box-sizing: border-box;
		margin-top: 80rpx;
		border-radius: 40rpx;
		display: flex;
		flex-direction: column;
		gap: 40rpx 0;

		.item {
			display: flex;
			flex-direction: column;
			gap: 20rpx 0;

			input,
			textarea {
				border: 1rpx solid skyblue;
				padding: 20rpx;
				width: 90%;
				border-radius: 20rpx;
			}
		}

		.title {
			font-size: 50rpx;
			font-weight: bold;
			text-align: center;
		}
	}
</style>